<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('4') // 默认选中首页
const activeSubNav = ref()

// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="mainContain">
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>

    <div class="zhiyouColumnSection1">
      <img
          src="@/assets/images/zhiyouColumnSection1.png"
          class="section1-image"
          alt="主视觉图"
      >
    </div>

    <div class="zhiyouColumnSection2">
      <!--  1-->
      <div class="zhiyouColumnItem zhiyouColumnItem1" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    2-->
      <div class="zhiyouColumnItem zhiyouColumnItem2" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle2">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent2">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate2">2025-02-15</span>

      </div>
      <!--    3-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    4-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    5-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    6-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    7-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    8-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    9-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <!--    10-->
      <div class="zhiyouColumnItem" @click="navigateTo('/zhiyouyun/columnDetail')">
        <div class="zhiyouColumnItemImg">
          <img src="@/assets/images/zhiyouColumnItemImg.png" class="zhiyouColumnItemImg" alt="zhiyouColumnItemImg">
        </div>
        <span class="zhiyouColumnItemTitle zhiyouColumnItemTitle1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="zhiyouColumnItemContent zhiyouColumnItemContent1">
        1. 九转数据功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。特点：提供7×24小时实时监控，支持分钟级价格变动预警。支持多种数据导出格式（如Excel、CSV、数据库等）。适用于品牌监控、功能…
      </span>
        <img src="@/assets/images/zhiyouColumnItemClick.png" class="zhiyouColumnItemClick" alt="zhiyouColumnItemClick">
        <span class="zhiyouColumnItemDate zhiyouColumnItemDate1">2025-02-15</span>

      </div>
      <span class="arrows arrowsLeft"> < </span>
      <span class="number number1">1</span>
      <span class="number number2">2</span>
      <span class="number number3">3</span>
      <span class="number number4">4</span>
      <span class="number number5">5</span>
      <span class="number number6">6</span>
      <span class="numberChar">...</span>
      <span class="number number8">8</span>
      <span class="number number9">9</span>
      <span class="number number10">10</span>
      <span class="arrows arrowsRight"> > </span>
    </div>


    <!--底部内容-->
    <Bottom/>
  </div>
</template>

<style scoped>
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}

.zhiyouColumnSection1 {

  height: 680px;
  width: 100%; /* 确保宽度100% */
  background-image: url('@/assets/bk/zhiyouColumnbkSection1.png'); /* 替换为实际图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.section1-image {
  position: absolute;
  top: 310px;
  left: 410px;
  width: 1100px;
  /* height: 68px; */
}

.zhiyouColumnSection2 {
  height: 3680px;
  background-color: #101010;
  position: relative;
}

.zhiyouColumnItem {
  width: 1200px;
  height: 328px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  /* position: absolute; */
  margin-left: 360px;
  margin-bottom: 24px;
  position: relative;
}

.zhiyouColumnItem1 {
  margin-top: 80px;
}

.zhiyouColumnItemImg {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 12px;
}

.zhiyouColumnItemTitle {
  width: 668px;
  height: 33px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 56px;
  left: 508px;
}

.zhiyouColumnItemContent {
  width: 668px;
  height: 120px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 30px;
  text-align: justify;
  font-style: normal;
  position: absolute;
  top: 105px;
  left: 508px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.zhiyouColumnItemClick {
  position: absolute;
  top: 244px;
  left: 508px;
}

.zhiyouColumnItemDate {
  height: 30px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 241px;
  left: 540px;
}

.zhiyouColumnItem2 {
  width: 1200px;
  height: 328px;
  background: linear-gradient(90deg, #FFB23D 0%, #FF6600 100%);
  border-radius: 20px;
  border: 1px solid #FF6600;
  margin-left: 360px;
  margin-bottom: 24px;
  position: relative;
}

.arrows {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  color: #FF6600;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.arrowsLeft {
  top: 3560px;
  left: 688px;
}

.arrowsRight {
  top: 3560px;
  left: 1184px;
}

.number {
  width: 14px;
  height: 33px;
  font-family: AlibabaPuHuiTi_2_115_Black, sans-serif;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 33px;
  text-align: justify;
  font-style: normal;
  position: absolute;
  top: 3570px;
}

.number1 {
  left: 768px;
  color: #FF6600;
}

.number2 {
  left: 807px;
}

.number3 {
  left: 845px;
}

.number4 {
  left: 883px;
}

.number5 {
  left: 921px;
}

.number6 {
  left: 959px;
}

.numberChar {
  width: 27px;
  height: 33px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 33px;
  text-align: justify;
  font-style: normal;
  position: absolute;
  top: 3570px;
  left: 997px;
}

.number8 {
  left: 1048px;
}

.number9 {
  left: 1086px;
}

.number10 {
  left: 1124px;
}
</style>